<style type="text/css">
.status-row{
display:block;
}
.tasklist-col-name{
display:inline-block;
width: 150px;
vertical-align: top;
}

.tasklist-col-due_date, .tasklist-col-done_date, .tasklist-col-assigned_to{
display:inline-block;
width: 80px;
vertical-align: top;
}

.tasklist-col-done{
display:inline-block;
width: 38px;
vertical-align: top;
text-align: center;
}

.tasklist-col-cost, .tasklist-col-fee{
display:inline-block;
width: 60px;
vertical-align: top;
}

.tasklist-col-currency{
display:inline-block;
width: 36px;
vertical-align: top;
}

.tasklist-col-notes{
display:inline-block;
width: 180px;
vertical-align: top;
}

.tasklist-col{
display:inline-block;
width: 150px;
vertical-align: top;
}

#MatterAllTasks:hover {
    cursor: pointer;
}

#MatterAllTasksBlock{
    width: 941px;
}

.notes:hover {
    cursor: help;
}
#add-task-popup{
  width: 530px;
  z-index: 101;
  height: auto;
  top: 0px;
  display:none;
  position:absolute;
}
#add-task-wrap{
  background: #FFF;
  padding: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px inset #ccc;
}
#add-task-wrap label{
  width:75px;
  display:inline-block;
  vertical-align: top;
  text-align: right;
}
#add-task-wrap input{
  margin-bottom:5px;
}
.delete-task{
  display: none;
  cursor: pointer;
}
.add-task-toevent{
  cursor: pointer;
}
.event-actions{
  display:none;
}
.event-head{
  height: 18px;
  vertical-align: top;
}
.event-head:hover .event-actions{
  display:inline-block;
}
.task-row:hover .delete-task{
  display:inline-block;
}
.task-row:hover{
background: #EEF;
}


</style>

<script type="text/javascript">
$(document).ready(function(){
    $.editable.addInputType("datepicker", {
        element:  function(settings, original) {
            var input = $("<input type=\"text\" name=\"value\" style==\"width:10px\"/>");
            settings.onblur = function(e) {
            };
            $(this).append(input);
            return(input);
        },
        plugin:  function(settings, original) {
            var form = this;
            $("input", this).filter(":text").datepicker({
                dateFormat: 'dd/mm/yy',
                onSelect: function(dateText) { $(this).hide(); $(form).trigger("submit"); }
            });
        }
    });

    $.editable.addInputType('autocomplete', {
                element : $.editable.types.text.element,
                plugin : function(settings, original){
                  $('input', this).autocomplete(settings.autocomplete);
          }
    });

    $('.edit-assigned-to').editable('/matter/update-task', {
        type: 'autocomplete',
        onblur: 'submit',
        autocomplete: {
          minLength : 0,
          source : "/matter/get-all-logins",
          select: function( event, ui ) {
            $(this).val(ui.item.value);
            var valid = true;
            if ( !ui.item ) {
              var matcher = $.ui.autocomplete.escapeRegex( $(this).val() );
              valid = false;
              ui.item.each(function(value) {
                if ( value.match( matcher ) ) {
                  valid = true;
                  return true;
                }
              });
            }
            if ( !valid ) {
              // remove invalid value, as it didn't match anything
              $( this ).val( "" );
              input.data( "autocomplete" ).term = "";
              return false;
            }
            return true;
          }
        },
        submitdata: function(value,settings){
             var tid = $(this).parent().attr('id');
             return { task_id : tid, field : 'assigned_to' };
           },
           cancel : false,
           submit : false,
           placeholder: '...',
           indicator : '<span class="icon-busy" />',
           tooltip: 'Click to edit...',
           select: true
    });

    $('#task_assigned_to').autocomplete({
        minLength: 1,
        source: "/matter/get-all-logins",
        focus: function( event, ui ) {
                    return false;
        },
        select: function( event, ui ) {
            $( "#task_assigned_to" ).val( ui.item.value );
            return false;
        }
    });

    $("#MatterAllTasks").click(function(event){
        $('#tasklist-pop-up').css('display','none');
        location.reload();
    });

    $('.editable').editable('/matter/update-task', {
          submitdata: function(value,settings){
                     var tid = $(this).parent().attr('id');
                     var fclass = $(this).attr('class').split(" ");
                     var field_name = (fclass[0]).split('-');
                     return { task_id : tid , field : field_name[2]}
                },
          //cancel : 'X',
          //submit : 'Ok',
          placeholder: '...',
          select : true,
          indicator : '<span class="icon-busy" />',
          tooltip: 'Click to edit....'
    });
    $('.editable-due-date').editable('/matter/update-task', {
          submitdata: function(value,settings){
              var tid = $(this).parent().attr('id');
              var fclass = $(this).attr('class').split(" ");
              var field_name = (fclass[0]).split('-'); 
                     var rule_id = $(this).attr('rule_id');
                     if(field_name[2] == "due_date" && rule_id){
                        var update_due = confirm("Changing the due date will unlink the task from date calculation rule");
                        if(update_due)
                           return { task_id: tid, field : field_name[2], rule_id: update_due }
                     }else 
                        return { task_id : tid , field : field_name[2]}
            },
            type: 'datepicker',
            select: true,
            indicator : '<span class="icon-busy" />',
            placeholder: '...',
            tooltip: 'Click to edit...',
    });
    $('.editable-done-date').editable('/matter/update-task', {
          submitdata: function(value,settings){
              var tid = $(this).parent().attr('id');
              var fclass = $(this).attr('class').split(" ");
              var field_name = (fclass[0]).split('-');
              return { task_id : tid , field : field_name[2]};
          },
          type: 'datepicker',
          select : true,
          indicator : '<span class="icon-busy" />',
          placeholder: '...',
          tooltip: 'Click to edit...',
          callback: function(data){
               var tid = $(this).parent().attr('id');
               var fclass = $(this).attr('class').split(" ");
               var field_name = (fclass[0]).split('-');
               if(field_name[2] == 'done_date'){
                  if(data == '')
                      $('input[name=doneflag-'+tid+']').attr('checked' ,false);
                  else
                      $('input[name=doneflag-'+tid+']').attr('checked' ,true);

                  $('input[name=doneflag-'+tid+']').click();
               }
          }
    });

    $('.tasklist-col-done > input[type=checkbox]').click(function(){
       var tid = $(this).val();
       var done_val = 0;
       if($(this).is(":checked")){ 
          done_val = 1;
       }else{
          done_val = 0;
          var conf_done = confirm("Do you wish to set the task to undone?");
          if(!conf_done){
              $(this).attr("checked", true);
              return;
          }
       }
        $.ajax({
            type: 'post',
            url: '/matter/update-task',
            data: { task_id: tid, field: 'done', value: done_val },
            success: function(data){
              $.ajax({
                type: "POST",
                url: "/matter/tasklistren/id/<?=$this->matter_id?>",
                data: {},
                success: function(data){
                    $('#tasklist-pop-up').empty();
                    $('#tasklist-pop-up').html(data);
                }
              });
            }
        });
    });

    $('.add-task-toevent').click(function(){
        var trigger_id = $(this).attr('id');
        $('#trigger_id').val(trigger_id);
        var height = $(document).height();
        $('#facade').css("height", height);
        $('#facade').show();
        ren_left = Math.round($(window).width()/2) - Math.round($('#add-task-popup').width());
        $('#add-task-popup').css('left', ren_left);
        $('#add-task-popup').css('display', 'block');
    });

    $('#add-task-cancel').click(function(){
        $('#add-task-popup').css('display', 'none');
        $('#facade').hide();
    });

    $( "#task_name" ).autocomplete({
            minLength: 1,
            source: "/matter/get-all-tasks",
            focus: function( event, ui ) {
                    return false;
            },
            select: function( event, ui ) {
                    $( "#task_name" ).val( ui.item.value );
                    $( "#task_id" ).val( ui.item.id );
                    var valid=true;
                    if ( !ui.item ) {
                      var matcher = $.ui.autocomplete.escapeRegex( $(this).val() );
                      valid = false;
                      ui.item.each(function(value) {
                        if ( value.match( matcher ) ) {
                          valid = true;
                          return true;
                        }
                      });
                    }
                   if ( !valid ) {
                     // remove invalid value, as it didn't match anything
                      $( this ).val( "" );
                      $(this).data( "autocomplete" ).term = "";
                      return false;
                   }
                    return true;
            }
    });

    $('#task_duedate').datepicker({
        dateFormat: 'dd/mm/yy',
    });

    $('#add-task-submit').click(function(){
       if($('#task_id').val() == ''){
           alert('Select task name!');
           return;
       }
       if($('#task_duedate').val() == ''){
           alert('Due date required!');
           return;
       }

       $.ajax({
           url: '/matter/add-event-task',
           type: 'POST',
           data: { trigger_ID: $('#trigger_id').val(),
                   code: $('#task_id').val(),
                   due_date: $('#task_duedate').val(),
                   assigned_to: $('#task_assignedto').val(),
                   detail: $('#task_detail').val(),
                   time_spent: $('#task_time').val(),
                   notes: $('#task_notes').val(),
                   cost: $('#task_cost').val(),
                   fee: $('#task_fee').val(),
                   currency: $('#task_currency').val()
                  },
           success: function(data){
              $.ajax({
                type: "POST",
                url: "/matter/tasklistren/id/<?=$this->matter_id?>",
                data: {},
                success: function(data){
                    $('#tasklist-pop-up').empty();
                    $('#tasklist-pop-up').html(data);
                }
              });

              $('#add-task-popup').css('display', 'none');
              $('#facade').hide();
           }
       }); 
    });

    $('.delete-task').click(function(){
        var tid = $(this).parent().attr('id');
        var del_conf = confirm("Do you want to delete task?");
        if(del_conf){
           $.ajax({
               url: '/matter/delete-task',
               type: 'post',
               data: { tid: tid },
               success: function(data){
                   $.ajax({
                   type: "POST",
                   url: "/matter/tasklistren/id/<?=$this->matter_id?>",
                   data: {},
                   success: function(data){
                       $('#tasklist-pop-up').empty();
                       $('#tasklist-pop-up').html(data);
                   }
                   });
               }
           }); 
        }
    });
                  
    $("input:button").button();
});

</script>

<div id="MatterAllTasksBlock" class="listrow" ><div id="MatterAllTasks" class="status-row">
<span class="tasklist-col-name" style="margin-left: 5px;"><? 
if ($this->renewal == 1) 
    echo "All renewals";
else
    echo "All tasks";
     ?></span>
<span class="tasklist-col-due_date" >Due date</span>
<span class="tasklist-col-done" >Done</span>
<span class="tasklist-col-done_date" >Done date</span>
<span class="tasklist-col-cost" >Cost</span>
<span class="tasklist-col-fee" >Fee</span>
<span class="tasklist-col-currency" >Cur.</span>
<? if ($this->renewal == 0) {?> 
<span class="tasklist-col-time_spent" >Time</span>
<? } ?>
<span class="tasklist-col-assigned_to" >Assigned To</span>
<span class="tasklist-col-notes" >Notes</span>
<span class="ui-icon ui-icon-arrowreturnthick-1-s" style="float: right;"></span>
</div>
<div class="list-matter-block-info" style="max-height: 350px; min-height: 100px; width:99%; height: auto;" >

<?php 
$event_id = '';
$event_code = "";
$add_empty_row = 0;
$close_event_box = 0;

foreach($this->matter_event_tasks as $event_task):
    if($event_id != $event_task['event_ID']){
       $event_id = $event_task['event_ID'];
if($close_event_box)
     echo "</div>";
 ?>
<div id="event-box-<?=$event_id?>" >
<? if($add_empty_row){ ?>
<div style="height:15px;"></div>
<? } ?>
<div class="status-row event-head" style="border-bottom: 1px solid #DDD;">
<span class="tasklist-col-name"><b><?=$event_task['event_name'] . " - " . $event_task['event_date'] ?></b></span>
<div class="event-actions" style="width:48px"><span class="add-task-toevent" id="<?=$event_id?>" title="Add task to event"><span class="ui-icon ui-icon-plusthick" style="float:left;"></span></span></div>
</div>
<?php $close_event_box = 1; }
    if($event_id == $event_task['trigger_ID']){
?> 
<div class="status-row task-row" id="<?=$event_task['ID']?>">
<span class="tasklist-col-name"><?=$event_task['task_name']?>
<? if($event_task['detail'] != "")
	echo " - " . $event_task['detail'] ?></span>

<span id="due_date-<?=$event_task['ID']?>" class="tasklist-col-due_date editable-due-date" rule_id="<?=$event_task['rule_used']?>" ><?=$event_task['due_date']?></span>
<span class="tasklist-col-done" ><input type="checkbox" name="doneflag-<?=$event_task['ID']?>" value="<?=$event_task['ID']?>" <? if($event_task['done']) echo "checked"; ?> ></span>
<span id="done_date-<?=$event_task['ID']?>" class="tasklist-col-done_date editable-done-date" ><?=$event_task['done_date']?></span>
<span class="tasklist-col-cost editable" ><?=$event_task['cost']?></span>
<span class="tasklist-col-fee editable" ><?=$event_task['fee']?></span>
<span class="tasklist-col-currency editable" ><?=$event_task['currency']?></span>
<? if ($this->renewal == 0) {?> 
<span class="tasklist-col-time_spent editable" ><?=$event_task['time_spent']?></span>
<?}?>
<span class="tasklist-col-assigned_to edit-assigned-to" ><?=$event_task['assigned_to']?></span>
<? if(strlen($event_task['task_notes']) < 25){?>
<span class="tasklist-col-notes editable" ><?=$event_task['task_notes'];?></span>
<? } else { ?>
<span class="tasklist-col-notes notes editable" title="<?=$event_task['task_notes'];?>"><? echo substr($event_task['task_notes'], 0, 25) . "...";?></span>
<? } ?>
<span class="delete-task" title="Delete task"><span class="ui-icon ui-icon-trash" style="float:right;"></span></span>
</div>
<?php }
	$add_empty_row = 1;
 ?>
<? endforeach; ?>
</div>

</div>
<div id="pr-confirm"></div>
<?php //endif; ?>

<div id="add-task-popup" class="listrow">
<div id="add-task-wrap">
<input type="hidden" name="trigger_id" value="" id="trigger_id" />
<label for="task_name" ><span style="color: #f00;">*</span>Task Name </label>
<input type="text" name="task_name" id="task_name" value=""/>
<input type="hidden" name ="task_id" id="task_id" value="" />
<label for="task_duedate" ><span style="color: #f00;">*</span>Due date </label>
<input type="text" name="task_duedate" id="task_duedate" value=""/>
<label for="task_detail" >Detail </label>
<input type="text" name="task_detail" id="task_detail" value="" />
<label for="task_cost" >Cost </label>
<input type="text" name="task_cost" id="task_cost" value="" />
<label for="task_fee" >Fee </label>
<input type="text" name="task_fee" id="task_fee" value=""/>
<label for="task_currency" >Currency </label>
<input type="text" name="task_currency" id="task_currency" value=""/>
<label for="task_assigned_to" >Assigned to </label>
<input type="text" name="task_assigned_to" id="task_assigned_to" value="" /><br>
<label for="task_notes" >Notes </label><textarea name="task_notes" id="task_notes" rows=2 cols=40></textarea><br>
<input type="button" name="add_task_cancel" id="add-task-cancel" value="Cancel" style="margin-top: 10px; margin-left: 4px; float: right;"/>
<input type="button" name="add_task_submit" id="add-task-submit" value="Add task" style="margin-top: 10px; float: right;"/>
</div>
</div>
